<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绑定标签属性 v-bind指令</title>
    <style>
        .picOver {
        border: 2px solid #333;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        width: 200px;
        height: auto;
    }

    </style>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <!-- <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.mCJr133c0o0X7-oothMedwHaHa?rs=1&pid=ImgDetMain"/>
        <img src="https://p.qpic.cn/mzk_kandan/duc2TvpEgSSZWXh5aLBHSosvjiaxwpibEbgkiaicCaCLt48kkZ9nJBpEbQ/0"/> -->
        <img 
        :src="url" 
        :title="title"
        :class="{picOver:showCss,bos:showBos}"
        width="200px"
        @mouseover="changeUrlOver" 
        @mouseout="changeUrlOut"
        />
    </div>
</body>
</html>
<script src="./js/2.7.14_dist_vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:"hhhhh",
            url:"https://tse2-mm.cn.bing.net/th/id/OIP-C.mCJr133c0o0X7-oothMedwHaHa?rs=1&pid=ImgDetMain",
            title:"熊出没",
            showCss:false,
            showBos:true,
        },
        methods: {
            //鼠标移入事件
            changeUrlOver(){
                this.url="https://tse2-mm.cn.bing.net/th/id/OIP-C.mCJr133c0o0X7-oothMedwHaHa?rs=1&pid=ImgDetMain";
                this.title="蜡笔小新";
            },
            //鼠标移出事件
            changeUrlOut(){
                this.url="https://p.qpic.cn/mzk_kandan/duc2TvpEgSSZWXh5aLBHSosvjiaxwpibEbgkiaicCaCLt48kkZ9nJBpEbQ/0";
                this.title="熊出没";
            },
        },
        computed:{},
    })
</script>